const n = `<!--
 * @Author: Quarter
 * @Date: 2023-11-22 20:39:29
 * @LastEditors: Quarter
 * @LastEditTime: 2024-12-13 11:41:47
 * @FilePath: /simple-ui/packages/documents/src/views/desktop/drawer/default-drawer.vue
 * @Description: 默认抽屉组件
-->
<template>
  <div>
    <s-form label-width="12em" colon="：">
      <s-form-item label="抽屉位置">
        <s-radio-group v-model="drawerPosition" :options="drawerPositionOptions"></s-radio-group>
      </s-form-item>
      <s-form-item label="是否挂在到 body 下">
        <s-radio-group
          v-model="appendToBody"
          :options="[
            { label: '否', value: false },
            { label: '是', value: true },
          ]"
        ></s-radio-group>
      </s-form-item>
      <s-form-item label="抽屉操作">
        <s-button theme="primary" @click="drawerVisible = true">打开抽屉</s-button>
      </s-form-item>
    </s-form>
    <s-drawer
      :visible.sync="drawerVisible"
      :position="drawerPosition"
      size="50rem"
      mask-close
      :append-to-body="appendToBody"
    >
      <div
        style="
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 1.6rem;
        "
      >
        <s-button theme="primary" @click="drawerVisible = false">关闭抽屉</s-button>
        <s-button theme="primary" @click="newDrawerVisible = true">打开新的抽屉</s-button>
      </div>
    </s-drawer>
    <s-drawer
      :visible.sync="newDrawerVisible"
      :position="drawerPosition"
      size="30rem"
      header
      title="新抽屉"
      footer
      text="这是一个新的抽屉中的内容"
      :confirm-button="{
        theme: 'success',
        text: '关闭',
      }"
      without-close-button
      :append-to-body="appendToBody"
      @confirm="newDrawerVisible = false"
    ></s-drawer>
  </div>
</template>

<script lang="ts">
import {
  DRAWER_POSITION_DEFAULT,
  DRAWER_POSITION_LABEL,
  DRAWER_POSITION_OPTIONS,
  type DrawerPosition,
} from "@smartcity/simple-ui";
import { Component, Vue } from "vue-property-decorator";

@Component
export default class DrawerDemo extends Vue {
  /**
   * @description: 抽屉位置选项列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly drawerPositionOptions = DRAWER_POSITION_OPTIONS.map((variant) => ({
    label: DRAWER_POSITION_LABEL.get(variant),
    value: variant,
  }));

  /**
   * @description: 抽屉位置
   * @private
   * @type {DrawerPosition}
   */
  drawerPosition: DrawerPosition = DRAWER_POSITION_DEFAULT;

  /**
   * @description: 是否挂在到 body 下
   * @private
   * @type {boolean}
   */
  appendToBody = true;

  /**
   * @description: 抽屉可见性
   * @private
   * @type {boolean}
   */
  drawerVisible = false;

  /**
   * @description: 第二个抽屉可见性
   * @private
   * @type {boolean}
   */
  newDrawerVisible = false;
}
<\/script>
`; export { n as default };
